/*
*@module: detail-table
*@module: description: 前端文件——R2表格
*@author: 陈刚
*/
<template>
  <div class="project-info-container">
    <div class="project-selector">
      <el-cascader :options="ProjectOptions" expand-trigger="hover" v-model="selectedProject" @change="projectChange" />
    </div>

    <div class="content">
      <div class="content-head">
        <!-- <div class="content-title">详细数据</div> -->
        <span class="lable">请选择元素类型：</span>
        <el-select v-model="selectedElement" placeholder="请选择元素类型" @change="ElementChange">
          <el-option v-for="item in ElementOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>

        <span class="lable">请选择调查类型：</span>
        <el-select v-model="selectedAssessType" placeholder="请选择调查类型" @change="assessTypeChange">
          <el-option v-for="item in assess_type_options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>

      <el-tabs v-model="activeName" @tab-click="switchTab">
        <el-tab-pane label="土壤信息" name="first">
          <el-table v-loading="listLoading" :data="r2_list" border stripe style="width: 100%">

            <el-table-column label="项目体" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.project_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="调查类型" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.assess_type_CN }}</span>
              </template>
            </el-table-column>
            <el-table-column label="元素" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.element_CN}}</span>
              </template>
            </el-table-column>
            <el-table-column label="R2系数" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.r2}}</span>
              </template>
            </el-table-column>

            <el-table-column label="是否接受" align="center">
              <template slot-scope="scope">

                <template v-if="scope.row.isAccept">
                  <el-tag type="success">接受</el-tag>
                </template>
                <template v-else>
                  <el-tag type="danger">不接受</el-tag>
                </template>
              </template>
            </el-table-column>

          </el-table>
        </el-tab-pane>

        <el-tab-pane label="水质信息" name="second">
          <el-table v-loading="listLoading" :data="r2_list" border stripe style="width: 100%">

            <el-table-column label="项目体" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.project_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="调查类型" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.assess_type_CN }}</span>
              </template>
            </el-table-column>
            <el-table-column label="元素" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.element_CN}}</span>
              </template>
            </el-table-column>
            <el-table-column label="R2系数" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.r2}}</span>
              </template>
            </el-table-column>

            <el-table-column label="是否接受" align="center">
              <template slot-scope="scope">

                <template v-if="scope.row.isAccept">
                  <el-tag type="success">接受</el-tag>
                </template>
                <template v-else>
                  <el-tag type="danger">不接受</el-tag>
                </template>
              </template>
            </el-table-column>
            
          </el-table>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script>
  import {
    getProjectInfo,
    getElementOptions,
    getR2List
  } from '@/api/table/project_info'



  export default {
    data() {
      return {
        activeName: 'first',
        ProjectOptions: [],
        selectedProject: [],
        ElementOptions: [],
        selectedElement: 'all',
        selectedAssessType: 0,
        r2_list: [],
        r2_list_all: [],
        listLoading: false,
        listLoading2: false,
      }
    },

    mounted() {
      this.getData()
    },
    methods: {
      /* 点击第二级目录时触发的事件 */
      async projectChange(value) {
        if (value.length == 2) {
          console.log('选项值', value)
          this.selectedElement = 'all'
          this.selectedAssessType = 0
          let res = await getElementOptions(value[1])
          console.log('getElementOptions', res)
          this.ElementOptions = res.data.res //元素选择列表

          this.getR2ListFn()

        }
      },

      ElementChange() {
        console.log('selectedElement', this.selectedElement)
        console.log('selectedAssessType', this.selectedAssessType)
        if (this.selectedElement == 'all') {
          if (this.selectedAssessType == 0) {

            this.r2_list = this.r2_list_all
          } else {

            this.r2_list = this.r2_list_all.filter(item => {
              return item.assess_type == this.selectedAssessType
            })
          }
        } else {
          if (this.selectedAssessType == 0) {

            this.r2_list = this.r2_list_all.filter(item => {
              return item.element == this.selectedElement
            })
          } else {

            this.r2_list = this.r2_list_all.filter(item => {
              return item.element == this.selectedElement && item.assess_type == this.selectedAssessType
            })
          }
        }

      },

      assessTypeChange() {
        if (this.selectedElement == 'all') {
          if (this.selectedAssessType == 0) {

            this.r2_list = this.r2_list_all
          } else {

            this.r2_list = this.r2_list_all.filter(item => {
              return item.assess_type == this.selectedAssessType
            })
          }
        } else {
          if (this.selectedAssessType == 0) {

            this.r2_list = this.r2_list_all.filter(item => {
              return item.element == this.selectedElement
            })
          } else {

            this.r2_list = this.r2_list_all.filter(item => {
              return item.element == this.selectedElement && item.assess_type == this.selectedAssessType
            })
          }
        }
      },

      switchTab(tabName) {
        this.selectedAssessType = 0
        this.selectedElement = 'all'
        this.getR2ListFn()
      },

      async getR2ListFn() {
        let selectedProject = this.selectedProject[1]

       
        console.log('this.activeName', this.activeName)
        if(this.activeName == 'first'){
          let params_obj = {
            selectedProject,
            type: 'ground'
          }
          let res = await getR2List(params_obj)
          console.log('getR2List', res)
          this.r2_list_all = res.data.res.filter(item => {
              return item.r2 > 0
            })
          this.r2_list = this.r2_list_all
        }else{
          let params_obj = {
            selectedProject,
            type: 'water'
          }
          let res = await getR2List(params_obj)
          console.log('getR2List', res)
          this.r2_list_all = res.data.res.filter(item => {
              return item.r2 > 0
            })
          this.r2_list = this.r2_list_all
        }
        
      },




      /* 请求二级选择器的树形数据 */
      async getData() {
        let res = await getProjectInfo()
        this.ProjectOptions = res.data.res
        console.log('ProjectOptions', this.ProjectOptions) //树形格式
        this.selectedProject = [
          this.ProjectOptions[0].value,
          this.ProjectOptions[0].children[0].value
        ]
        this.projectChange(this.selectedProject)
      }
    },

    computed: {
      assess_type_options() {
        return [{
            value: 0,
            label: '全部'
          },
          {
            value: 1,
            label: '初步调查'
          },
          {
            value: 2,
            label: '详细调查'
          },
          {
            value: 3,
            label: '修复调查'
          }
        ]
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .project-info-container {

    .project-selector {
      width: 100%;
      height: 50px;
      background: rgb(153, 204, 204);
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      >span {
        margin-right: 10px;
      }
    }

    .content {
      padding: 20px;
    }

    .content-head {
      margin-bottom: 15px;

      .lable {
        margin-left: 15px;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
          Microsoft YaHei, Arial, sans-serif;
      }

      .el-input {
        width: 280px;
      }
    }

    .drop_table {
      width: 100%;
    }

    .drop_table td,
    .drop_table th {
      border-right: none !important;
    }

    .drop-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    .table2-container {
      flex: 1;
    }

    .chart_contain {
      margin-left: 30px;
      flex: 1
    }

    .nodata {
      color: rgba(245, 75, 75, 0.933);
    }

    .pollution-row {
      background: rgba(245, 108, 108, .1);
      color: rgba(245, 75, 75, 0.933);
    }

    .notdetector-row {
      background: #f0f9eb;
    }

    .notvalue-row {
      background: oldlace;
    }

    .pagination {
      margin-top: 30px;
    }



    .map_container {
      height: 500px;
    }

  }

  .el-popper {
    .map_container2 {
      height: 300px;
    }
  }
</style>